import React, { Component } from 'react';
import { View, Text, StyleSheet, Dimensions, Button,TouchableHighlight } from 'react-native';
import NavigationService from '../NavigationService';
const SCREEN_WIDTH = Dimensions.get('window').width;

export default class defaultComponentName extends Component {
    _onpress= (name)=>{
        //NavigationService.navigate(name)
    }
    render() {
        let index = this.props.index;
        return (
            <View style={styles.container}>
                <TouchableHighlight onPress={() => this._onpress('HomeA')}>
                    <Text style={index == 'A' ? styles.activeItem : styles.buttonItem}>综合</Text>
                </TouchableHighlight>

                <TouchableHighlight onPress={() => this._onpress('HomeB')} style={{marginHorizontal: 10}}>
                    <Text style={index == 'B' ? styles.activeItem : styles.buttonItem}>热门</Text>
                </TouchableHighlight>

                <TouchableHighlight onPress={() => this._onpress('HomeC')}>
                    <Text style={index == 'C' ? styles.activeItem : styles.buttonItem}>推荐</Text>
                </TouchableHighlight>
                
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        width: SCREEN_WIDTH,
        height: 70,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'flex-end',
        position: 'absolute',
        top: 0,
        right: 0,
        left: 0,
    },
    activeItem: {
        fontWeight: "bold",
        fontSize: 22,
        color: '#FFF',
        textShadowColor: '#000',
        textShadowOffset: { width: 1, height: 1 },
        textShadowRadius: 1,
    },
    buttonItem: {
        fontSize: 18,
        color: '#fff',
        textShadowColor: '#6e6e6e',
        textShadowOffset: { width: 1, height: 1 },
        textShadowRadius: 1,
    },

});